JavaScript Basics

Beginner Level JavaScript Concepts

Overview

Introduction to JavaScript
Adding JavaScript to HTML
Variables (var, let, const)
Data Types
Type Conversion & Coercion
Operators
Comments

1. Introduction to JavaScript

JavaScript is a high-level, interpreted programming language that conforms to the ECMAScript specification. It is a language that is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.

JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior, and all major web browsers have a dedicated JavaScript engine to execute it.

How JavaScript Works in Browsers

When a browser loads a web page with JavaScript, it:

Parses the HTML and creates the DOM (Document Object Model)
Loads and parses JavaScript code
Executes the JavaScript code
Updates the DOM based on the JavaScript execution
Renders the updated page to the user

2. Adding JavaScript to HTML

JavaScript can be added to HTML documents in three ways:

Inline JavaScript (inside HTML elements)
Internal JavaScript (inside <script> tags)
External JavaScript (in separate .js files)

Syntax Examples

Inline JavaScript

<button onclick="alert('Hello World!')">Click Me</button>

Internal JavaScript

                <script>

                  // JavaScript code goes here

                  console.log('Hello from internal JavaScript!');

                </script>

External JavaScript

3. Variables (var, let, const)

Variables are containers for storing data values. JavaScript has three ways to declare variables:

var - Function-scoped, can be redeclared and updated
let - Block-scoped, cannot be redeclared but can be updated
const - Block-scoped, cannot be redeclared or updated (for primitive values)

Syntax Examples

                // Using var

                var name = "John";

                var age = 25;

                // Using let

                let isStudent = true;

                let score = 95.5;

                // Using const

                const PI = 3.14159;

                const MAX_USERS = 100;

4. Data Types

JavaScript has dynamic types. The same variable can be used to hold different data types. JavaScript has 7 primitive data types and objects:

String - Text data
Number - Integer or floating-point numbers
Boolean - true or false
Null - Intentional absence of any object value
Undefined - Variable that has not been assigned a value
Symbol - Unique and immutable primitive value
BigInt - For integers larger than 2^53 - 1
Object - Collection of key-value pairs

Syntax Examples

                // String

                let message = "Hello, World!";

                // Number

                let count = 42;

                let price = 19.99;

                // Boolean

                let isActive = true;

                let isComplete = false;

                // Null and Undefined

                let emptyValue = null;

                let notAssigned;

                // Symbol

                let sym = Symbol("id");

                // BigInt

                let bigNumber = 1234567890123456789012345678901234567890n;

5. Type Conversion & Coercion

Type conversion is when we explicitly convert a value from one type to another. Type coercion is when JavaScript automatically converts types behind the scenes.

Type Conversion Examples

                // String to Number

                let str = "123";

                let num = Number(str);

                let num2 = parseInt(str);

                // Number to String

                let number = 456;

                let string = String(number);

                let string2 = number.toString();

                // Boolean Conversion

                let bool = Boolean(1); // true

                let bool2 = Boolean(0); // false

Type Coercion Examples

                // String and Number

                console.log("5" + 2); // "52" (string concatenation)

                console.log("5" - 2); // 3 (number subtraction)

                // Boolean and Number

                console.log(true + 1); // 2 (true becomes 1)

                console.log(false + 1); // 1 (false becomes 0)

6. Operators

Operators are used to perform operations on variables and values. JavaScript has several types of operators:

Arithmetic Operators - +, -, *, /, %, ** (exponentiation)
Assignment Operators - =, +=, -=, *=, /=, %=
Comparison Operators - ==, ===, !=, !==, >, <, >=, <=
Logical Operators - && (and), || (or), ! (not)
Ternary Operator - condition ? value1 : value2

Syntax Examples

                // Arithmetic Operators

                let a = 10, b = 3;

                console.log(a + b); // 13

                console.log(a - b); // 7

                console.log(a * b); // 30

                console.log(a / b); // 3.333...

                console.log(a % b); // 1

                console.log(a ** b); // 1000

                // Comparison Operators

                console.log(5 == "5"); // true (loose equality)

                console.log(5 === "5"); // false (strict equality)

                // Logical Operators

                let x = 5, y = 10;

                console.log(x < 10 && y > 5); // true

                console.log(x > 10 || y > 5); // true

                console.log(!(x === y)); // true

                // Ternary Operator

                let age = 18;

                let canVote = age >= 18 ? "Yes" : "No";

                console.log(canVote); // "Yes"

7. Comments

Comments are used to explain JavaScript code, and to make it more readable. JavaScript comments can also be used to prevent execution when testing alternative code.

There are two types of comments in JavaScript:

Single-line comments - Start with //
Multi-line comments - Start with /* and end with */

Syntax Examples

                // This is a single-line comment

                let name = "John"; // This comment is after code

                /*

                 * This is a multi-line comment

                 * It can span multiple lines

                 */

                function calculateArea(radius) {

                  // Calculate the area of a circle

                  return Math.PI * radius * radius;

                }